<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="templates/layout">

<div layout:fragment="content">
	<div id="grid"></div>
	<script type="text/javascript">
        $(document).ready(function () {

//            $("#grid").kendoGrid({
//                datasource: dataSource,
//                height: 300,
//                groupable: true,
//                sortable: true,
//                pageable: true
//            });

            var isDateField = [];
            $.ajax({
                url: "http://www.mocky.io/v2/5835e736110000020e0c003c",
                dataType: "jsonp",
                success: function (result) {
                    generateGrid(result);
                }
            });

            function generateGrid(response) {
                var model = generateModel(response);
                var columns = generateColumns(response);

                var grid = $("#grid").kendoGrid({
                    dataSource: {
                        transport: {
                            read: function (options) {
                                options.success(response.data);
                            }
                        },
                        pageSize: 5,
                        schema: {
                            model: model
                        }
                    },
                    columns: columns,
                    pageable: true,
                    editable: true,
                    columnMenu: true
                });
            }

            function generateColumns(response) {
                var columnNames = response["columns"];
                return columnNames.map(function (name) {
                    return {field: name, format: (isDateField[name] ? "{0:D}" : "")};
                })
            }

            function generateModel(response) {

                var sampleDataItem = response["data"][0];

                var model = {};
                var fields = {};
                for (var property in sampleDataItem) {
                    if (property.indexOf("ID") !== -1) {
                        model["id"] = property;
                    }
                    var propType = typeof sampleDataItem[property];

                    if (propType === "number") {
                        fields[property] = {
                            type: "number",
                            validation: {
                                required: true
                            }
                        };
                        if (model.id === property) {
                            fields[property].editable = false;
                            fields[property].validation.required = false;
                        }
                    } else if (propType === "boolean") {
                        fields[property] = {
                            type: "boolean"
                        };
                    } else if (propType === "string") {
                        var parsedDate = kendo.parseDate(sampleDataItem[property]);
                        if (parsedDate) {
                            fields[property] = {
                                type: "date",
                                validation: {
                                    required: true
                                }
                            };
                            isDateField[property] = true;
                        } else {
                            fields[property] = {
                                validation: {
                                    required: true
                                }
                            };
                        }
                    } else {
                        fields[property] = {
                            validation: {
                                required: true
                            }
                        };
                    }
                }

                model.fields = fields;

                return model;
            }


            $("#clickme").bind("click", function () {
//                alert("BIND!");
                var grid = $("#grid").data("kendoGrid");
                var dataSource1 = new kendo.data.DataSource({
                    transport: {
                        read: function(options) {
                            // make JSONP request to https://demos.telerik.com/kendo-ui/service/products
                            $.ajax({
                                url: "https://demos.telerik.com/kendo-ui/service/products",
                                dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
                                success: function(result) {
                                    // notify the data source that the request succeeded
                                    options.success(result);
                                    //generateGrid(result);
                                },
                                error: function(result) {
                                    // notify the data source that the request failed
                                    options.error(result);
                                }
                            });
                        }
                    }
                });
                grid.setDataSource(dataSource1);

            });
        });


	</script>

	<button id="clickme">Click me!</button>
</div>
</html>